import React, { useState } from 'react'
import './login.css'
import { Form, Button, Input } from '@nutui/nutui-react'
import { message } from 'antd'
import { NumberKeyboard, PasscodeInput, Space } from 'antd-mobile'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'

export default function GetPassword() {
let navigate = useNavigate()
let [step,setstep] = useState(1)
let [phone,setphone] = useState('')
let [code,setcode] = useState('')
let [pcode,setpcode] = useState('')
let [password,setpassword] = useState('')
let [newpwd,setnewpwd] = useState('')
let getpcode = async ()=>{
    let phoneRegex = /^1[3-9]\d{9}$/;
    if(!phoneRegex.test(phone)) return message.error('请输入正确的手机号')
    let res = await axios.post('/szh/get_pcode',{phone})
    if(res.data.code==200){
        message.success('验证码已发送')
        setstep(2)
        setpcode(res.data.pcode)
    }else{
        message.error(res.data.msg)
    }
}
let verifyCode = ()=>{
    if(code!=pcode) return message.error('验证码错误')
    setstep(3)
}
let verifypwd =async ()=>{
    if(password!=newpwd) return message.error('两次密码不一致')
    let res = await axios.put('/szh/setpwd',{phone,password})
    if(res.data.code==200){
        message.success('修改成功，请重新登录')
        navigate('/login')
    }
}
  return (
    <div className='getpassword'>
        <div className='getpassword-form'>
            <h1 className='title'>retrieve password</h1>
            {step==1?<div className='getpassword-form-1'>
                <h2 style={{textAlign:'left',color:'#555',fontSize:'20px'}}>请输入手机号</h2>
                <Input
                    onChange={val=>setphone(val)}
                    style={{width:'90%',margin:'20px auto',backgroundColor:'#f5f5f5',borderRadius:'20px'}} placeholder='请输入手机号'/>
                <Button 
                    size='large' 
                    type='primary' 
                    style={{width:'90%',margin:'0 auto'}}
                    onClick={getpcode}
                >
                    获取验证码
                </Button>
            </div>:''}
            {step==2?<div className='getpassword-form-1'>
                {/* <h2 style={{textAlign:'left',color:'#555',fontSize:'20px'}}>请输入验证码</h2> */}
                <p style={{textAlign:'left'}}>验证码已发送至{phone.slice(0,3)}****{phone.slice(7,11)}请注意查收</p>
                <hr style={{margin:'10px 0'}} />
                <PasscodeInput seperated keyboard={<NumberKeyboard />}
                    value={code}
                    onChange={val=>setcode(val)}
                />
                <Button 
                    size='large' 
                    type='primary' 
                    style={{width:'90%',margin:'0 auto',marginTop:'20px'}}
                    onClick={verifyCode}
                >
                    下一步 
                </Button>
            </div>:''}
            {step==3?<div className='getpassword-form-1'>
                <h2 style={{textAlign:'left',color:'#555',fontSize:'20px'}}>请设置新密码</h2>
                <Input
                    onChange={val=>setpassword(val)}
                    style={{width:'90%',margin:'20px auto',backgroundColor:'#f5f5f5',borderRadius:'20px'}} placeholder='请输入密码'/>
                <Input
                    onChange={val=>setnewpwd(val)}
                    style={{width:'90%',margin:'20px auto',backgroundColor:'#f5f5f5',borderRadius:'20px'}} placeholder='请再次输入密码'/>
                <Button
                    type='primary'
                    size='large'
                    style={{width:'90%'}}
                    onClick={verifypwd}
                >
                    完成
                </Button>
            </div>:''}
        </div>
    </div>
  )
}
